<template>
    <HeaderTitle title="记录推荐！" style="width: 3.5rem"></HeaderTitle>
    <div class="recommend-record-box">
        <div class="timeline">
            <div class="item" v-for="record in recordList" :key="record.id"
                 :data-text="'《'+record.title+'》'">
                <div class="text">
                    <div class="button-box">
                        <button v-if="record.type == 1" class="but">约 会</button>
                        <button v-if="record.type == 2" class="but">活 动</button>
                        <button v-if="record.type == 3" class="but">赛 事</button>
                        <button v-if="record.type == 4" class="but">帮 助</button>
                    </div>
                    <img :src="record.cover" alt="" class="img">
                    <h2 class="time">{{ formatDateTime(record.createTime) }}</h2>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import useStore from "@/store";
import {getRecordRecommend} from "@/api/record";
import {formatDateTime} from "@/utils/date";
import {RecordRecommend} from "@/api/record/types";

const {app, web} = useStore();

const recordList = ref<RecordRecommend[]>([]);
onMounted(() => {
    getRecordRecommend().then(({data}) => {
        recordList.value = data.data;
    });
});
</script>

<style scoped lang="scss">

.recommend-record-box {
  width: 100%;
  position: relative;
  transition: 0.3s ease 0s;

  .timeline {
    display: flex;
    margin: 0 auto;
    position: relative;
    flex-wrap: wrap;
    flex-direction: column;

    &:before {
      position: absolute;
      left: 50%;
      width: 0.1rem;
      height: 100%;
      margin-left: -0.05rem;
      content: "";
      background: var(--main-1-hs1);
    }

    .item {
      padding: 0 0.6rem;
      transition: 0.5s;
      box-sizing: border-box;
      width: 50%;
      position: relative;

      .text {
        width: 100%;

        .button-box {
          position: relative;
          top: 0.6rem;
          z-index: 1;
          display: flex;
          justify-content: center;

          .but {
            border-radius: 0 0 0.1rem 0.1rem;
          }
        }

        .time {
          position: relative;
          top: -0.9rem;
          margin: 0 auto;
          transition: 0.4s;
          text-align: center;
          width: 60%;
          padding: 0.1rem 0.2rem;
          background: var(--main-2-ha1);
          color: var(--main-1-h4);
          border-radius: 0.15rem;
        }

        .img {
          width: 100%;
          background-position: center !important;
          background-size: cover !important;
          border-radius: 0.4rem;
          box-shadow: 0 0 0.3rem 0.1rem var(--box-shadow);
          transition: 0.3s ease-in-out;
        }
      }

      &:before {
        content: attr(data-text);
        width: 100%;
        position: absolute;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-image: var(--header-bg-color);
        border-left: 0.1rem solid var(--main-1-hs3);
        top: 38%;
        padding-left: 0.4rem;
        right: calc(-100% + 0.05rem);
        font: 900 1rem '';
      }

      &:nth-child(even) {
        align-self: flex-end;

        &:before {
          right: auto;
          text-align: right;
          left: calc(-100% + 0.05rem);
          padding-left: 0;
          border-left: none;
          border-right: 0.1rem solid var(--main-1-hs3);
          padding-right: 0.5rem;
        }
      }

      &:hover {
        .img {
          box-shadow: 0 0 0.3rem 0.1rem var(--main-1);
        }
      }
    }
  }

  @media (max-width: 40rem) {
    .timeline:before {
      display: none;
    }
    .item {
      align-self: baseline !important;
      width: 100% !important;
      justify-content: center;

      &:before {
        left: 0.03rem !important;
        padding-left: 10% !important;
        top: 0 !important;
        text-align: left !important;
        border: 0 !important;
        z-index: 1;
        font-size: 0.6rem !important;
      }
    }
  }

  @media (max-width: 36rem) {
    .item {
      transform: scale(0.9);
    }
  }
}
</style>